import React from "react";
import './TodoMain.css';
import { useDispatch, useSelector } from "react-redux";
import { asyncCheckTodo, asyncRemove } from "../../../app/slices/todoSlice";
export default function TodoMain() {
  //获取 redux 中的 todo 的状态值
  let todos = useSelector(state => state.todo);
  let dispatch = useDispatch();
  return (
    <ul className="todo-main">
      {
        todos.map(item => {
          return <li key={item.id}>
                  <label>
                    <input type="checkbox" checked={item.done} onChange={(e) => {
                      //获取点击 checkbox 切换之后的状态
                      // console.log(e.target.checked);  id  done
                      dispatch(asyncCheckTodo({id: item.id, done: e.target.checked}));
                    }} />
                    <span>{item.title}</span>
                  </label>
                  <button onClick={() => {
                    // 删除当前所点任务
                    dispatch(asyncRemove(item.id));
                  }} className="btn btn-danger">删除</button>
                </li>
        })
      }
    </ul>
  );
}
